<template>
  <div class="app-container">
    <div class="page-title">审批中</div>
    <!-- 提示文本 -->
    <div class="pending-tip">
      稍等，请假申请单正在审批中，若该申请单长时间未处理，请联系(护理组组长)!
    </div>
    <!-- 操作记录时间线（动态渲染） -->
    <el-card class="mt-4">
      <template #header><h3>操作记录</h3></template>
      <el-timeline>
        <!-- 发起申请：护理员A的nickName -->
        <el-timeline-item
          :timestamp="formatTime(nurseOperateTime)"
          color="blue"
        >
          <div>
            <strong>{{ nurseNickName }}</strong>
            <span class="ml-2">发起申请-申请请假（已发起）</span>
          </div>
        </el-timeline-item>
        <!-- 审批中：护理组组长的nickName -->
        <el-timeline-item
          :timestamp="formatTime(leaderOperateTime)"
          color="blue"
        >
          <div>
            <strong>{{ leaderNickName }}</strong>
            <span class="ml-2">护理组组长审批-申请审批（审批中）</span>
          </div>
        </el-timeline-item>
      </el-timeline>
    </el-card>
    <!-- 返回按钮 -->
    <div class="mt-6 operate-btn">
      <el-button @click="goBack">返回</el-button>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import { getUser } from "@/api/system/user";

const router = useRouter();
const route = useRoute();

// 动态数据：护理员/组长昵称、操作时间
const nurseNickName = ref(""); // 护理员A的nickName（来自index）
const leaderNickName = ref(""); // 组长的nickName（默认值）
const nurseOperateTime = ref(""); // 护理员提交时间（来自index）
const leaderOperateTime = ref(""); // 组长审批中时间（当前时间）

// 原生日期格式化（与index保持一致）
const formatTime = (time) => {
  if (!time) return "";
  const date = new Date(time);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  const hour = String(date.getHours()).padStart(2, "0");
  const minute = String(date.getMinutes()).padStart(2, "0");
  const second = String(date.getSeconds()).padStart(2, "0");
  return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
};

// 页面加载：获取参数+组长信息
onMounted(async () => {
  try {
    // 1. 接收index传递的参数
    const { billNo, submitData: submitDataStr } = route.query;
    if (!billNo || !submitDataStr) {
      ElMessage.error("缺少申请数据，无法加载");
      return;
    }
    const submitData = JSON.parse(submitDataStr);

    // 2. 提取护理员信息（来自index的submitData）
    //nurseNickName.value = submitData.nurseNickName || "护理员A";
    nurseNickName.value = submitData.nurseNickName;
    nurseOperateTime.value = submitData.createTime;

    // 3. 获取护理组组长信息（userId=105）
    const leaderRes = await getUser(105);
    if (leaderRes.code === 200 && leaderRes.data) {
      //leaderNickName.value = leaderRes.data.nickName || "护理组组长";
      leaderNickName.value = leaderRes.data.nickName;
    }

    // 4. 生成组长审批中时间（当前时间）
    leaderOperateTime.value = formatTime(new Date());
  } catch (err) {
    console.error("加载审批中页面失败：", err);
    ElMessage.error("页面加载异常");
  }
});

// 返回index页面
const goBack = () => {
  router.push("/xietong/shenqing/leaveApplication");
};
</script>
<style scoped>
.page-title {
  font-size: 18px;
  font-weight: 700;
  color: #1f2329;
  margin-bottom: 20px;
}
.pending-tip {
  color: #666;
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 30px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}
.operate-btn {
  text-align: center;
}
.el-timeline {
  padding: 10px 20px;
}
.el-timeline-item {
  margin-bottom: 15px;
}
</style>
